<template>
  <div class="chatList back-white">
    <div> 
      <page-title>陪聊服务</page-title>  
    </div>
    <div class="text-center msg-total">
      <span>今日消息总量：{{msgInfoData.message_total}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
      <span>今日总用户数：{{msgInfoData.real_user_total}}</span>
    </div>
    <div class="main">
    <div class="left" style="float:left">
        <el-menu class="robots">
            <el-menu-item style="padding:5px 0 5px 10px">
            <input style="height:40px">
            <div class="switch" >搜索</div>
            </el-menu-item>   
            <el-menu-item v-for="(item,index) in recentChatList" class="single-player" :key="index" :index="index.toString()"  @click="playerSwitch(item,item.countA,item.countB)" style="padding:10px" >   
              <div class="portrait">
                  <img model="aspectFill" class="head" :src="item.avatar" alt="">
              </div>
              <div class="words">
                  <div class="name"> {{item.nickName}}</div>
                    <div class="lastMsg">{{item.content}}</div>
              </div>

                <div class="msgCount" v-if="(item.countA + item.countB)>0">{{item.countA + item.countB}}</div>
                
            </el-menu-item>
        </el-menu>
  </div>

    <div class="right" >
    <el-menu  class="el-menu-demo" mode="horizontal" style="height:50px" >
        <el-menu-item class="single-robot" v-for="(item,index) in onlineRobots" :key="index" :style="index==robotIndex?'border:10px solid #00DD00':''"  :index="index.toString()" @click="robotSwitch(index,item)">
              <div class="msgCount" v-if="item.unread>0">{{item.unread}}</div>
              <img model="aspectFill" class="portrait" :src="item.portrait" alt="">
        </el-menu-item>
    </el-menu>
    <div class="nav">
        <div class="sexSwitch">
            <div style="float:left">性别：{{robotSex}}</div>
            <div @click="switchSex" class="switch">切换</div>
        </div>
        <div class="offMSg">
            <div @click="updateRobot" class="update">刷新</div>
            <div class="count">当前有<span style="color:red">{{offMSgCount}}</span>条待处理的消息</div>
        </div>
    </div>
  <div class="contentChat">
          <div class="playerInfo" style="float:left">
              <div class="single-word">{{otherOne.nickname}}(真用户)</div>
              <div class="single-word">年龄：{{otherOne.age}}</div>
              <div class="single-word">学校：{{otherOne.school}}</div>
              <div class="single-word">地址：{{otherOne.address}}</div>
              <div class="single-word">工作：{{otherOne.industry}}</div>
              <div class="single-word">独白：{{otherOne.introduce}}</div>
          </div>
          <div class="chat-view" style="float:left">
        <div class="sendMsg">
          <input v-model="inputValue" @keyup.enter="inputSend"  @input='inputChange'   class='chatinput-input'  placeholder="输入文字" confirm-type='send'>
          <div class="send" @click.stop="inputSend" >发送</div>
        </div>
      <div class='record-wrapper' id="recordWrapper"> 
        <div class="historyBTN" @click="getHistory()">请求历史消息</div>
          <div v-for="(message,index) in msgList" :key="index"> 
            <div v-if="message.msgCategory == 5&&message.content.category == 2" class="specialMsg">
              <img mode="aspectFill" :src="message.content.props.link"  >
              <span>{{message.content.props.msg}}</span>
            </div> 
            <div  v-if="message.msgCategory == 5&&message.content.category == 1" class='record-say-hi-wrapper'>
              <div v-if="message.sender == otherOne.accid" class='record-item-time'>ta超级喜欢你，给你打了个招呼，快回复ta吧！</div>
              <div v-if="message.sender != otherOne.accid" class='record-item-time'>你超级喜欢ta，给ta打了个招呼！</div>
            </div>

          <div class='record-say-hi-wrapper' v-if="message.sendTime">
              <div class='text-center record-item-time'>{{getDateDiff(message.sendTime,'getTime')}}</div>
          </div>
          <div v-if="(message.sender != otherOne.accid&&(message.msgCategory == 1|| message.msgCategory == 2))" class="record-chatting-item self">          
          <!--聊天内容-->
          <div v-if="message.msgCategory == 1" class="record-chatting-item-text">{{message.content}}</div>
          <div v-if="message.msgCategory == 2" class="imgOfMsg"><img mode="aspectFill"   :src="message.content"></div>
          <img class="chatHead" v-if="message.msgCategory != (5||6)"   :src="myself.avatar">
          </div> 
          <!-- receive-->
          <div  v-if="(message.sender == otherOne.accid&&(message.msgCategory == 1|| message.msgCategory == 2))" class="record-chatting-item other"> 
            <!-- 头像-->
            <!--聊天内容-->
            <img class="chatHead record-chatting-item-img other-header" v-if="message.msgCategory != (5||6)"   :src="otherOne.avatar"> 
            <div v-if="message.msgCategory == 2" class="imgOfMsg"><img mode="aspectFill"   :src="message.content"></div>          
            <div v-if="message.msgCategory == 1" class="record-chatting-item-text">{{message.content}}</div> 
            </div>  
      </div>
      </div>
          </div>
          <div class="playerInfo" style="float:left">
              <div class="single-word">{{myself.nickname}}(机器人)</div>
              <div class="single-word">年龄：{{myself.age}}</div>
              <div class="single-word">学校：{{myself.school}}</div>
              <div class="single-word">地址：{{myself.address}}</div>
              <div class="single-word">工作：{{myself.industry}}</div>
              <div class="single-word">独白：{{myself.introduce}}</div>
          </div>
    </div>
  </div>
  <div class="allTools">
      <div class="single-tool"  v-for="(message,index) in likeLst" :key="index" >
        <div class="top">
            <img model="aspectFill" :src="message.head_pic" >
            <div class="nickName">{{message.nickname}}</div>
        </div>
        <div class="bottom">
            <img @click="likeOr(true,message.ruuid,index)" model="aspectFill" src="./../../../../static/img/gou.jpg" >
          <img  @click="likeOr(false,message.ruuid,index)" model="aspectFill" src="./../../../../static/img/cha.jpg" >
        </div>
      </div>
  </div>
</div>
  </div>
</template>
<script >
  import * as api from './../../../api/api'
  import startWebSocket from '../../../utils/imeventhandler' 
  export default {
    data(){
      return {
        clickRobotIdx: null, //当前点击机器人的下标
        offHisMsgID:'',//
        robotSex:'女',
        onlineRobots:[],
        robotIndex:100,
        offMSgCount:0,
        inputValue: '',//文本框输入内容 
        historyAllDone: false, //是否已经加载完所有历史 
        otherOne:{
          nickname:'',
          age:'',
          industry:'',
          address:'',
          school:'',
        },
        myself:{},
        msgList:[],
        limit:10, // 每次查询结果
        page:1,//当前页数
        likePage:1,//当前页数
        oneMoreLoading:1,
        historyAllDone: false, //是否已经加载完所有历史 
        historyLoading:false,
        recentChatList:[],
        likeLst:[],
        msgInfoData: {
            message_total: 0,
            real_user_total: 0
        }
      }
    },
    created(){
        this.getmsgInfo();
        this.offHisMsgID = ''
        window.globalData.subscriber.on('ceshi', (data)=>{
          console.log("data",data)
        })
          console.log(321321,this.guid()) 
        startWebSocket.startWebSocket()
        this.getOLRobots()
        var that = this
        //得到所有未处理消息数
        api.getOffMsgCount().then(res=>{
          that.offMSgCount = res.data.data.total
        })
        window.globalData.subscriber.on('RECEIVE_P2P_MESSAGE',data=>{
            that.fstloadData()
        }) 
        window.globalData.subscriber.on('MSG_USER_DATA_LIST',data=>{
          that.updateRecentChat()
        })
        window.globalData.subscriber.on('UPDATE_MSG_LIST',data=>{
          that.refreshData()
        })
        
    },
    methods:{
      getmsgInfo(){
        let vm = this;
        api.getMessageTotalInfo().then(res=>{
          if(res.data.code==300000&&res.data.data){
            vm.msgInfoData=res.data.data;
          }
        })
      },
      updateRecentChat(){
        var that = this
        var msgList = window.globalData.recentChatList
        that.recentChatList = msgList
      },
      inputSend(e) {             
            if (this.inputValue == ''){
              alert('输入不能为空!')
              return
            }
            if((this.inputValue).length > 50){
              alert('输入不能超过50个字!')
              return
            }
            this.sendRequest(this.inputValue) 
      },
      fstloadData(){
          var that = this
          console.log("登陆成功，开始调用接口",window.globalData.ifMsgOff)
          //  if (window.globalData.ifMsgOff){
          //      that.offlineMsg()
          //  }

      },
          //输入事件 /
      inputChange(e) { 
        // this.inputValue= e.data 
        // console.log(e.data)
      },

      switchSex(){
        var that = this
        that.robotIndex = 100
        that.onlineRobots = []
        that.recentChatList = []
        var body = {}
        if(that.robotSex == '女'){
          body= {
              account:sessionStorage.getItem('username'),
              sex:1,
          }
          that.robotSex = '男'
        }else{
              body= {
              account:sessionStorage.getItem('username'),
              sex:2,
          }
          that.robotSex = '女'
        }
        api.getOLRobots(body).then(res=>{
          if(res.data.data.list){
          var data = res.data.data.list
          data.forEach((item,index)=>{
              let singleRobot = {
                  nickname : item.nickname,
                  portrait : item.avatar,
                  accid : item.accid,
                  password : item.password,
                  unread:item.unread_cnt
              } 
              that.onlineRobots.push(singleRobot)
          })
          }else{
              console.log('没有未读消息机器人！')
          }
        })
      },

      likeOr(choose,param,index){
        var that = this
        var body = {}
          body = {
          "uuid": that.myself.accid,
          "ruuid": param,
          "type": choose? 1:2,
          "super_like": false
        }

          api.likeOrHate(body).then(res=>{
            console.log(res,index)
              if(res.data.code == 300000)
              that.likeLst.splice(index, 1)
            })
        
      
      },

      random () {
          var len = 10
      　　 var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'   /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      　　 var maxPos = $chars.length
      　　 var str = ''
      　　 for (var i = 0; i < len; i++) {
      　　　　str += $chars.charAt(Math.floor(Math.random() * maxPos))
      　　      }
      　　     return str
      },

      guid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
            return v.toString(16);
        });
      },
      getOLRobots(){
          var that = this
        let body= {
              account:sessionStorage.getItem('username'),
              sex:2,
          }
      api.getOLRobots(body).then(res=>{
          if(res.data.data.list){
          var data = res.data.data.list
          data.forEach((item,index)=>{
              let singleRobot = {
                  nickname : item.nickname,
                  portrait : item.avatar,
                  accid : item.accid,
                  password : item.password,
                  unread:item.unread_cnt
              } 
              that.onlineRobots.push(singleRobot)
          })
          }else{
              console.log('没有未读消息机器人！')
          }
        })
      },
      getHistory(){
        var self = this
        let data = {
          message_id:self.offHisMsgID == ''? 0:self.offHisMsgID,
          sender:self.otherOne.accid,
          receiver:self.myself.accid,
          chat_category:3,
          page:self.page,
          size:self.limit,
        } 
        api.getMsgsHistory(data).then(res => {
          console.log("历史消息",res)
          let data = res.data.data.data
          if (!data){
            this.historyAllDone = true
            return
          }
          var newArray = []
          if (!(window.globalData.P2pMessageList[self.otherOne.accid])){
            window.globalData.P2pMessageList[self.otherOne.accid] = []
          }
          for (let i = 0;i < data.length;i++){
            //加进全局数据
            window.globalData.P2pMessageList[self.otherOne.accid].unshift({
              msgId:data[i].msg_id,
              content:data[i].content,
              msgCategory:data[i].msg_category,
              sender:data[i].sender,
              sendTime:data[i].send_time
            })
            //加进当前列表
            var  singleMsg = {
              msgId:data[i].msg_id,
              content:data[i].msg_category == 5? JSON.parse(data[i].content):data[i].content,
              msgCategory:data[i].msg_category,
              sender:data[i].sender,
              hash:1,
              sendTime:data[i].send_time,
              status:1,
            }
            newArray.unshift(singleMsg)
          }
          self.msgList=newArray.concat(self.msgList)
          console.log("到这儿！")
          self.page++ 
          self.oneMoreLoading = 1 
          self.historyLoading = false
          console.log(self.msgList,"当前页面数据！")
        })
      },
      emjTools(data){
        var content = data.replace(/\[.{0,2}\S]/ig,function (word) {
            return '<img class="emj"  src="https://ximi-jy.oss-cn-hangzhou.aliyuncs.com/quyue/biaoqing/'+ emjList[word.replace(/\s/,'')]+'"/>';
        })
        return content
      },
      offlineMsg(){
        //先获取未读消息
        var self = this
        let data = {
          sender:self.otherOne.accid,
          receiver:self.myself.accid,
        }
        api.getMsgOffline(data).then(res => {
          console.log("离线消息",res)
          window.globalData.P2pMessageList[self.otherOne.accid] = []
          console.log("thisMessage",res.data.data.P2POfflineMsg)
          if (res.data.data.P2POfflineMsg){
            var thisMessage =res.data.data.P2POfflineMsg
            var newArray = []
            thisMessage.forEach((item,index)=>{
              window.globalData.P2pMessageList[thisMessage[0].sender].push({
              msgId:item.msgid,
              content:item.content,
              msgCategory:item.msg_category,
              sender:item.sender,
              sendTime:item.sendtime
              })
            var  singleMsg = {
              msgId:item.msgid,
              content:item.msg_category == 5?JSON.parse(item.content):item.content,
              msgCategory:item.msg_category,
              sender:item.sender,
              hash:1,
              sendTime:item.send_time,
              status:1,
              }
              newArray.push(singleMsg)
            })
            //发送已读回执
                  var msgP2pReadedR = { 
                    accid: thisMessage[0].sender,
                    msgid: thisMessage[thisMessage.length - 1].msgid,
                }
                console.log("发送了已读回执！")
                window.globalData.subscriber.emit('OFF_MSG_READED',msgP2pReadedR)  

                  setTimeout(function() {
                    self.msgList=newArray.concat(self.msgList)
                    //  self.refreshData()
                    console.log(self.msgList,"本页消息！！")     
                  }, 500)
                  //记录离线消息msgID以便离线消息和历史消息去重
                  self.offHisMsgID = thisMessage[0].msgid
          }else{
            self.getHistory()
          }
        }) 
      },
      bottom(){
        var ele = document.getElementById('recordWrapper');
        ele.scrollTop = ele.scrollHeight;
      },
      //发送网络请求：发送文字 
      sendRequest(text) {
        var self = this
        let wsStatus = window.globalData.localSocket.readyState
        let timestamp = (new Date()).valueOf()
        let hash = self.random()
        //将消息存入发送状态表
        console.log(wsStatus,"wsStatus")
        window.globalData.recentChatList[(self.otherOne.accid)].content = text
        window.globalData.recentChatList[(self.otherOne.accid)].countA = 0
        window.globalData.recentChatList[(self.otherOne.accid)].countB = 0
        window.globalData.recentChatList[(self.otherOne.accid)].sendTime = timestamp

        console.log("替换全局信息",window.globalData.recentChatList[(self.otherOne.accid)])

        if (wsStatus == 1){
            window.globalData.subscriber.emit('UPDATE_RECENT_CHAT', {data:text,receiver:self.otherOne.accid,msgCategory:1, chatCategory:3,time:timestamp,hash:hash})
              var  singleMsg = {
                      msgId:1,
                      content:text,
                      msgCategory:1,
                      sender:self.myself.accid,
                      hash:hash,
                      sendTime:timestamp,
                      status:0,
        }
            // self.AddTime(timestamp)
            self.msgList.push(singleMsg)
            if (!(window.globalData.P2pMessageList[self.otherOne.accid])){
            window.globalData.P2pMessageList[self.otherOne.accid] = []
            }
            window.globalData.P2pMessageList[self.otherOne.accid].push({
                      msgId:1,
                      content:text,
                      msgCategory:1,
                      sender:self.myself.accid,
                      sendTime:timestamp,
          })
          //  self.msgRecord(hash,timestamp)
        } else{
                      var  singleMsg = {
                      msgId:1,
                      content:text,
                      msgCategory:1,
                      sender:self.myself.accid,
                      hash:hash,
                      sendTime:timestamp,
                      status:2,
                                      }
                      self.msgList.push(singleMsg)
        }
        console.log('当前数据',self.msgList)
        setTimeout(function() {
          self.bottom()
          console.log("操作到底了")
        }, 100);
      
        self.inputValue = ''
      },
      msgRecord(hash,time){
        window.globalData.msgSendingMap.set(hash,time)
      },
      AddTime(timestamp){
        var length = this.msgList.length
        if (length>=1&&  (parseInt(timestamp) -  parseInt(this.msgList[length-1].sendTime)  ) > 1000  * 60 * 10  ){
            window.globalData.P2pMessageList[this.otherOne.accid].push({
                    msgCategory:6,
                    sender:0,
                    sendTime:timestamp
            })
            this.msgList.push({
                    msgId:1,
                    content:1,
                    msgCategory:6,
                    sender:0,
                    hash:1,
                    sendTime:this.getDate(parseInt(timestamp)),
                    status:1,
            })
            console.log(this.msgList,"1221")
        } 
      },
      updateRobot(){
        this.offMSgCount = 0
        this.onlineRobots = []
        this.msgList = []
        this.likeLst = []
        this.recentChatList = []
        this.robotSex = '女'
        this.getOLRobots()
        //得到所有未处理消息数
        var that = this
        api.getOffMsgCount().then(res=>{
          that.offMSgCount = res.data.data.total
        })
      },
      robotSwitch(index,user){
        this.clickRobotIdx = index
        this.offHisMsgID = ''
        window.globalData.P2pMessageList = {}
        this.likePage = 1
        this.page = 1
        this.msgList = []
        this.likeLst = []
        this.robotIndex = index
        this.myself.accid = user.accid
        this.myself.nickname = user.nickname
        this.myself.avatar = user.portrait
        this.myself.unread = user.unread
        var that = this
        body = {
          accid:that.myself.accid,
          page:that.likePage,
          size:that.limit,
        }
        api.getLoveLst(body).then(res=>{
          console.log("喜欢列表！",res.data.data)
          that.likeLst = res.data.data.data
          that.likePage++
        })
        var body = {
        'accid':user.accid
        }
        api.getUserInfo(body).then(res=>{
          console.log(res.data.data,'真人信息！')
          that.myself.age = res.data.data.age
          that.myself.school = res.data.data.school
          that.myself.address = res.data.data.address
          that.myself.industry = res.data.data.industry
          that.myself.introduce = res.data.data.introduce
        })
        //请求登陆
        window.globalData.nowRobot.accid = user.accid
        window.globalData.nowRobot.nickname = user.nickname
        window.globalData.nowRobot.portrait = user.portrait
        window.globalData.nowRobot.portrait = user.password
        window.globalData.nowRobot.ifMsgOff = user.unread > 0 ? true : false
        window.globalData.subscriber.emit('ROBOT_LOGIN', {accid:user.accid,password:user.password}) 
        console.log('请求登陆！')
      },
      playerSwitch(param,countA,countB){
        this.offHisMsgID = ''
        this.page = 1
        console.log("所有聊天信息",window.globalData.P2pMessageList)
        this.msgList = []
        this.otherOne.accid = param.accid
        this.otherOne.nickname = param.nickName
        this.otherOne.avatar = param.avatar
        let ifMsgOff = (param.countA + param.countB) > 0?true:false
        var that = this
        var body = {
          'accid':param.accid
        }
        //请求真人详细信息
        api.getUserInfo(body).then(res=>{
          console.log(res.data.data,'真人信息！')
          that.otherOne.age = res.data.data.age
          that.otherOne.school = res.data.data.school
          that.otherOne.address = res.data.data.address
          that.otherOne.industry = res.data.data.industry
          that.otherOne.introduce = res.data.data.introduce
        })
        //开始请求两人间离线消息
        console.log('离线消息!!!',(window.globalData.P2pMessageList[that.otherOne.accid] == []))
        if (ifMsgOff&&!(window.globalData.P2pMessageList[that.otherOne.accid])){
          console.log("拉取离线消息")
            that.offlineMsg()
        }else{
          console.log("刷新消息！",ifMsgOff,(window.globalData.P2pMessageList[that.otherOne.accid] == []),window.globalData.P2pMessageList[that.otherOne.accid])
          that.refreshData()
        }
        window.globalData.recentChatList[param.accid].countA = 0
        window.globalData.recentChatList[param.accid].countB = 0
        this.onlineRobots[this.clickRobotIdx].unread = this.onlineRobots[this.clickRobotIdx].unread - countA - countB
      },
      refreshData(){
        var msgList0 = window.globalData.P2pMessageList[this.otherOne.accid] ?window.globalData.P2pMessageList[this.otherOne.accid]: []
        var msgList1 = []
        msgList0.forEach((item,index)=>{
        //    if (item.msgCategory == 6 && (item.sendTime).indexOf("-")==-1){
        //      item.sendTime = this.getDate(parseInt(item.sendTime))
        //      console.log(item.sendTime,(item.sendTime).indexOf("-")==-1)
        //  }
        //  if (item.msgCategory == 1){
        //      item.content = emjTools(item.content)
        //  }
          if(item.msgCategory == 5){
            if(typeof(item.content) == 'string'){
              item.content = JSON.parse(item.content)
            }
          }
          var  singleMsg = {
            msgId:item.msgId,
            content:item.content,
            msgCategory:item.msgCategory,
            sender:item.sender,
            hash:1,
            sendTime:item.sendTime,
            status:1,
          }
          msgList1.push(singleMsg)
        })
        this.msgList = msgList1
        console.log("当前数据1",this.msgList)
      }, 
    }
  }
</script>
<style lang="scss" scoped>
.msg-total{
  padding:10px;
  span{
    font-size:18px;
  } 
}
.allTools{
  width:180px;
  height:820px;
  overflow:auto;
}
.record-say-hi-wrapper{
  text-align:center;
  width:100%;
  display:flex;
  flex-direction:row;
  justify-content:center;
  .record-item-time {
    margin-top:5px;
    border-radius: 5px;
    padding:4px 5px;
    background-color: #D6D5DB;
    color:#fff;
    font-size: 13px; 
  }
}
.imgOfMsg{
  margin-top:20px;
  width:230px;
  height:auto;
  background:#FFFFFF;
  border-radius:0px 8px 8px 8px;
  border:1rpx solid rgba(151,151,151,0.21);
  img{
    display:block;
    width:214px;
    margin:8px auto;
  }
}
.chatHead{
  width:40px;
  height:40px;
}
 .chatList{
     width: 100%;
     height: 100%;
     .main{
         display: flex;
        //  align-items: center;
      .left{
         flex:0 0 250px;
     .robots{
         width: 250px;
        .switch{
            margin-top: 16px;
            width: 50px;
            height: 30px;
            background-color: lightblue;
            text-align: center;
            line-height: 30px;
            float: right;
            border-radius: 20%;
    }
     }
     .single-player{
         padding: 0;
         display: block;
         height: 60px;
         width: 100%;
         display: flex;
         align-items: center;
         position:relative;
        .msgCount{
          position:absolute;
          width:16px;
          height:16px;
          font-size:6px;
          background:red;
          color:white;
          line-height:16px;
          text-align:center;
          border-radius:50%;
          left:50px;
          top:10px;
          }
         .portrait{
             flex: 0 0 50px;
             width: 50px;
             height: 50px;
             border-radius: 50%;
             position: relative;
             .head{
                width: 50px;
                height: 50px;
                border-radius: 50%;
             }
         }
        .words{
          margin-left: 10px;
          flex: 1;
          .name{
            width:100%;
            height:30px;
            line-height: 30px;
          }
          .lastMsg{
            width:180px;
            height:30px;
            line-height: 30px;
            overflow:hidden;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
        }
     }
         }
         .right{
             flex: 0 0 1400px;
            //  background: #FFB7DD;
        .single-robot{
             padding:0;
             margin:0;
             margin-left:10px;
             width:50px;
             height:50px;
             font-size:10px;
             text-align:center;
             display:block;
             border-radius:50%;
             position:relative;
             .msgCount{
              position:absolute;
              width:10px;
              height:10px;
              font-size:6px;
              background:red;
              color:white;
              line-height:10px;
              text-align:center;
              border-radius:50%;
             }
             .portrait{
                display:block;
                padding:0;
                margin:0;
                width: 50px;
                height: 50px;
                border-radius: 50%;
             }
           }
           .nav{
               padding:0 30px 0 30px; 
               height:50px;
               width:100%;
               background:#DDDDDD;
            .sexSwitch{
                line-height:50px;
                float:left;
                height:50px;
                .switch{
                margin-top: 10px;
                width: 50px;
                height: 30px;
                background-color: lightblue;
                text-align: center;
                line-height: 30px;
                float: left;
                margin-left: 10px;
                border-radius: 20%;
                }
               }
            .offMSg{
                float:right;
              .update{
                margin-top: 10px;
                width: 50px;
                height: 30px;
                background-color: lightblue;
                text-align: center;
                line-height: 30px;
                float:right;
                margin-left: 10px;
                border-radius: 20%;
                }
                .count{
                    float:right;
                    height:50px;
                    text-align: center;
                    line-height: 50px;
                }
            }
           }
            .contentChat{
                margin:0 auto;
                width:1300px;
                height:680px;
                // border:1px solid black;
                // background:#77FFEE;
            .chat-view{
                width:450px;
                height:108%;
                border:1px solid red;
                position:relative;
                padding-bottom:50px;
                .sendMsg{
                  width:446px;
                  height:50px;
                  border:1px solid black;
                  position:absolute;
                  bottom:10px;
                  left:0px;
                  .send{
                    width:19%;
                    line-height:50px;
                    float:left;
                    font-size:30px;
                    text-align:center;
                  }
                  input{
                    height:100%;
                    width:80%;
                    font-size:30px;
                    float:left;
                  }
                }
            .record-wrapper{
              overflow:auto;
              height:98%;
              width: 100%;
              padding-bottom: 10px;
              padding-top:5px;
              .historyBTN{
                text-align:center;
                line-height:30px;
                width:100px;
                height:30px;
                border:1px solid black;
                margin:5px auto;
              }
              // .record-item-time-wrapper {
              //   display:flex;
              //   flex-direction:row;
              //   justify-content:center;
              //   .record-item-time {
              //     border-radius: 5px;
              //     padding:2px 5px;
              //     background-color: #D6D5DB;
              //     color:#fff;
              //     font-size: 13px; 
              //   }
              // }
              .featch-wx--chatting-item-text,.record-chatting-item-text{
                line-height:25px;
                border-radius: 5px;
                background-color: #fff;
                color:#4E5969;
                padding: 8px;
                box-sizing:border-box;
                word-wrap:break-word;
                overflow: hidden;
                margin-top:20px;
                border-radius:0  8px 8px 8px;
                font-size:14px;
                display:flex; 
                // .emj{
                //   vertical-align:middle;
                // }
              }
    .record-chatting-item-text {
      max-width: 70%; 
    }
    .featch-wx--chatting-item-text{
      width: 231px; 
      padding: 15px 8px;
    }
    .featch-wx-btn{
      .right-btn,.left-btn{
        width:80px;
        height:33px;
        line-height:33px;
        font-size:13px;
        color:#4E5969;
        border-radius:6px;
        margin-top:12px;
      }
      .left-btn{
        background:#7ED321;
        &:active{
          opacity: .6;
        }
      }
      .right-btn{
        background:#FF5E66;
        margin-left:8px;

      }
    }
    .black_btn{
      width:100%; 
      .blcak-item{ 
        width:60%;
        margin:auto;
        height:40px;
        line-height:40px;
        font-size:14px;
        border-radius:20px;
        color:#4E5969;
        background:#FF5E66;
      }
    }
    /* tip消息富文本 */
    .tip-rich-text {
      background-color:#D6D5DB;
      text-align:center;
      align-self:center;
      height:20px;
      font-size:14px;
      padding:2px 10px;
      color:#4E5969;
      border-radius: 5px;
      margin:auto;
    }
    //我发的消息内容
    .self {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      color: #fff;
      .audio-wrapper{
        .image{
          transform:rotate(180deg);
        } 
      }
    } 
    .record-chatting-item {
      width: 100%; 
      box-sizing: border-box;
      .right-triangle{  
        height:0px;    
        width:0px;    
        border-width:10px;    
        border-style:solid;    
        border-color:transparent transparent transparent #80a1d5;    
        margin-top: 10px;
      }  
      .chatHead {
        display:block;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        display: inline-block;
        margin-left:12px;
      }
    }
    //另一个人
    .other {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      color: #fff;
      .other-header{
        margin-left:0;
        margin-right:12px; 
      } 
      
    }
  }
            }
            .playerInfo{
                width:420px;
                height:100%;
                // border:1px solid black;
                .single-word{
                  width:100%;
                  font-size:28px;
                  line-height:50px;
                  text-align:center;  
                }
            }
            }
         }
     }
 }

 .single-tool{
   width:180px;
   height:100px;
   border:1px solid black; 
   .top{
     width:100%;
     height:50%;
     padding:10px;
     img{
        width:40px;
        height:40px;
        border-radius:50%;
        display:block;
        float:left;
     }
     .nickName{
       overflow:hidden;
       font-size:20px;
       height:30px;
       line-height:30px;
       float:left;
       margin-left:10px;
     }
   }
   .bottom{
     width:100%;
     height:50%;
     padding:10px;
     img{
        width:30px;
        height:30px;
        float:left;
        margin-left:30px;
     }
   }
 }
</style>
